<template>
	<view >
		<!-- 返回 -->
		<view class="backs">

		</view>
		<view class="container">
			<loading
				ref="loading"
				:custom="false"
				:shadeClick="false"
				:type="2"
				@callback="callback()">
			</loading>
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'" >
				<!-- 商户名称 许可证号-->
				<view class="text-box">
					<text class="text-temp">商户名称：{{MerchantName}}</text>
					<text class="text-temp">许可证号：{{licence}}</text>
				</view>
			</view>
			<!-- 授权门店 人员 -->
			<view class="model">
				<!-- <view class="onlyOne">
					<view class="modelLf">
						<image src="../../static/font/temp/sj.png"></image>
					</view>
					<view class="modelrt">
						<text>已授权门店</text>
						<text class="psnums"><text class="psnum">26</text>个</text>
					</view>
				</view> -->
				<view class="onlyOne">
					<view class="person">
						<image :src="url()+'/wximg/person.png'"></image>
					</view>
					<view class="modelrt">
						<text>已授权人员</text>
						<text class="psnums"><text class="psnum">{{empoNumber}}</text>个</text>
					</view>
				</view>
				<text class="modeline"></text>
				<view>
					<button class="pesBtn" @click="open" hover-class='pesBtn-hover' type="primary" style="padding: 0 100upx;">授权</button>
				</view>
			</view>
	        <!-- 调用弹窗方法1 授权 -->
	        <uni-pop ref="qxPop">
	        	<view class="popup-info">
					<navigator type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</navigator>
	        		<view class="popuptitle">被授权人信息登记</view>
					<form class="form">
						<!-- <view class="uni-list-cell">
							<view class="uni-list-cell-left">门店名称</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
								</picker>
							</view>
						</view> -->
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
							<view class="uni-list-cell-db uni-input">
								<input name="test" type="text"  v-model="clerkName"  maxlength="10"/>  
							</view>
						</view>
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">手机号码</view>
							<view class="uni-list-cell-db uni-input">
								<input name="test1" type="text" v-model="clerkPhone" maxlength="11"   />  
							</view>
						</view>
						<!-- <view class="uni-list-cell">
							<view class="uni-list-cell-left">授权类型</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="index" :range="array1">
									<view class="uni-input">{{array1[index]}}</view>
								</picker>
							</view>
						</view> -->
	        		</form>
					<view class="btnPat">
						<button type="default" class="btn" @click="sure">确认授权</button>
					</view>
	        	</view>
	        </uni-pop>
			<view  v-if="contents2.length!=0"  class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view class="tableBox">
					<view class="tabletitle">{{AuthorizationList}}</view>
					<view class="table">
						<view class="bgName">
							<text>{{shopName}}</text>
						</view>	
						<wyb-table 
						:key="key"
						show-vert-border="false" 
						header-bg-color="#fff" 
						first-col-bg-color="#fff" 
						content-bg-color="#fff"
						height='182px'
						content-ft-color="#333333"  
						header-weight="true" 
						border-color="#ffffff"
						ref="table" 
						:headers="headers2" 
						:contents="contents2" 
						width="100%"
						:show-vert-border="vertborder"
						:loading="loading"
						:url-col="urlCol"
						@onCheck="onCheck"
						@onCellClick="onCellClick"
						@onButtonClick="onButtonClick"
						  />			
					</view>
					        
				</view>    
			</view>
			<view   v-if="contents2.length==0"  class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view  class="tableBox">
					<view class="tabletitle">暂无数据</view>
				</view>	
			</view>
			
			<!-- 取消授权 -->
			<popupConfirm ref="tableConfirm">
				<view class="popup-info">
					<view class="confirm-center">是否删除被授权人？</view>
					<view class="confirm-text">
						<button class="confirm-button-text" type="primary" @click="sureEmpower">是</button>
						<view class="confirm-line"></view>
						<button class="confirm-button-text" type="primary" @click="cancelEmpower">否</button>
					</view>
				</view>
			</popupConfirm>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import loading from '@/components/xuan-loading/xuan-loading.vue'
	import {SelectCustomerClerkList,CancelCustomerClerk,AddlCustomerClerk} from '@/api/request.js';
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		components: {
			wybTable,
			loading
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				array: ['001繁荣路店', '002佳园路店', '003净月大街店', '004北亚泰大街店'],
				array1: ['店员-被授权[尽可验签]', '店员-被授权[尽可验签]', '店员-被授权[尽可验签]'],
				index: 0,
				customerClerk:{},//列表对象
				clerkName:'',
				clerkPhone:'',
				empoNumber:0,
				heightContent:'',
				swiperHeight: 0,
				// 商户名称
				MerchantName: '吉A581k2',
				// 许可证号
				licence:'140602402769',
				// 已授权列表
				AuthorizationList:'已授权列表',
				// 授权店名
				shopName:'001繁荣路店',
				//表格
				key: 0,
				headers2:[],
				contents2:[],
				loading:true,
				vertborder:false, //金融竖向条,但是不能去除头部
				// 表格数据
				headers: [{
					label: '姓名',
					key: 'clerkName',
					width:150,
				}, {
					label: '手机号',
					key: 'clerkPhone',
					width:180,
				}, {
					label: '角色',
					key: 'roleName',
					width:135,
					
				}, {
					label: '操作',
					key: 'operation',
					width:180,
				}],
				contents: [
				],
				urlCol: [{
					type: 'pages/historyDelivered/detail',
					key: 'id'
				}, {
					type: 'http',
					key: 'url'
				},
				{
					type: 'button',
					key: 'operation'
				},
				],
			};
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
				 // 获取屏幕的高度
				// console.log(res.windowHeight);
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
				   // 　console.log(data.top)  // 获取元素高度
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
					 // console.log(that.heightContent)
	　　        }).exec()
				}
			});		
		},
		onLoad() {
			user=service.getUsers().user;
			this.MerchantName=user.customerShop.shopName;
			this.shopName=user.customerShop.shopName;
			// 许可证号
			this.licence=user.customerShop.licenseCode;
			//表格加载动画
		},
		onShow() {
				if(user.clerkType==1){
					uni.showModal({
						title: '警告',
						content: '您不是商户管理员无法进行授权操作',
						showCancel: false,
						success: function (res) {
						    uni.switchTab({
						    	url:'/pages/index/index'
								})
						}
					})
					return;
				}else{
					
					this.init();
					
				}
			
		},
		methods: {
			// 触发弹窗
			open(){
				let qxPop = this.$refs.qxPop
				qxPop.open()
			},			
			// 关闭弹窗
			close(){
				let qxPop = this.$refs.qxPop
				qxPop.onTap()
			},
			// 确认授权btn
			sure(){
				var reg = /^\d+$|^\d+[.]?\d+$/;
				if(this.clerkName.length==0){
					uni.showToast({
						title: '请输入姓名 !',
						icon: 'none'
					});
					return ;
				}else if(this.clerkPhone.length!=11){
					uni.showToast({
						title: '手机号位数不正确!',
						icon: 'none'
					});
					return ;
				}else if(!(reg.test(this.clerkPhone))){
					uni.showToast({
						title: '手机号只能为数字!',
						icon: 'none'
					});
					return ;
				}
				let qxPop = this.$refs.qxPop
				qxPop.onTap()
				let  param={
					clerkName:this.clerkName,
					clerkPhone:this.clerkPhone,
					shopId:user.customerShop.id,
				};
				this.loading=true;//调起遮罩loading
				AddlCustomerClerk(param).then(res => {
					if (res.code == 200) {
						this.init();
						this.customerClerk={};
						this.clerkName='';//清空数据
						this.clerkPhone='';//清空数据
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
					} else if(res.code == 264){
						this.init();
							this.customerClerk={};
						uni.showModal({
							title: '警告',
							content: res.message,
							showCancel: false
						})
					}else{
						
						uni.showModal({
							title: '警告',
							content: '取消失败请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
			},
			// 返回上一层
			backlast(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			//表格
			onCellClick(e) {
			/* 	console.log("列表点击")
				console.log(e); */

			},
			onCheck(e) {
			/* 	console.log("多选框点击")
				console.log(e) */
			},
			// 取消授权
			onButtonClick(e) {
			   let tableConfirm = this.$refs.tableConfirm
			   tableConfirm.open()
				/* console.log(e); */
				this.customerClerk=e.lineData;
			},
			// 取消授权的是和否点击事件
			sureEmpower(){
				this.showopen();
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
				let  param={
					id:this.customerClerk.id
				};
				this.loading=true;//调起遮罩loading
				CancelCustomerClerk(param).then(res => {
					this.hideclose();
					if (res.code == 200) {
						this.init();
						this.customerClerk={};
					
					uni.showToast({
						title: '授权已取消',
						icon: 'success'
					});
					
					} else{
						this.loading=false;
						uni.showModal({
							title: '警告',
							content: '取消失败请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					this.loading=false;
					this.hideclose();
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
				
			},
			cancelEmpower(){
				let tableConfirm = this.$refs.tableConfirm
				tableConfirm.onTap()
				this.customerClerk={};//清空对象
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			},
			init(){//初始化列表
				let  param={
					shopId:user.customerShop.id,
					clerkType:1,
				};
				/* console.log(param); */
				let thsi=this;
				SelectCustomerClerkList(param).then(res => {
				/* 	console.log(res) */
					if (res.code == 200) {
						thsi.contents=[];
						thsi.empoNumber=res.map.data.length;
					res.map.data.forEach(function (item){
						if(parseInt(item.clerkType)==1){//判断类型
							item.roleName="员工"
						}else{
							item.roleName="管理员"
						}
						item.operation="取消授权"
						thsi.contents.push(item);
					});
					
					if(	thsi.contents.length==0){
						uni.showToast({
							title: '暂无数据！',
							icon: 'none'
						});
						
					}
						this.headers2 = this.headers.slice()
						this.contents2 = this.contents.slice()
						this.loading = false
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
				hideclose:function(){
					this.$refs.loading.close();
				},
				showopen:function(){
					this.$refs.loading.open();
				},
				callback(){
					console.log("加载关闭后回掉");
				},
		},

	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
	}

	/*授权门店 人员*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		display: flex;
		flex-direction: column;
	}
	.text-temp {
		line-height: 50upx;
         font-size: 32upx;
	}
	.pesBtn {
		border-radius: 200upx;
		background-color: #ffc562;
		font-size:28upx;
		color: #fff;
	}
	.pesBtn::after{
		border: none;
	}
	/* 待配送 已配送商户 */
	.model {
		width:71%;
		margin: 0 auto;
		margin-top: -129upx;
		padding: 35upx 10%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227,227,227,.5);
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.onlyOne {
		display: flex;
		align-items: center;
	}

	.modeline {
		width: 1px;
		height:70upx;
		background-color: #eeeeee;
	}

	.modelLf,.person  {
		width:40upx;
		height:40upx;
		border-radius: 50%;
		margin-right: 20upx;
		border: solid 1px #007457;
		position: relative;
	}

	.modelLf image {
		width: 70%;
		height: 70%;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -35%;
		margin-left: -35%;
	}
     .person image {
		width:90%;
		height:85%;
		display: block;
		position: absolute;
		bottom:0%;
		left: 50%;
		margin-left: -45%;
	}
	.modelrt {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #888888;
		white-space: nowrap;
		font-size: 21.84upx;
		text-align: center;
	}

	.psnums {
		color: #000;
		font-size: 28.08upx;
		margin-top: 5upx;
	}

	.psnum {
		color: #f69c3c;
		font-size:47.32upx;
		font-weight: bold;
		margin-right: 10upx;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		margin-top: 44upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.table {
		width: 96%;
		margin: 0 auto;
	}
	/*包裹ID及包裹编号*/
	.bgName {
		padding:20upx 0; 
		line-height: 40upx;
		display: flex; 
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}
	/*弹窗*/
	.popup-info {
		position: fixed;
		min-width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius:27upx;
		background-color: #fff;
		z-index: 9999;
	}
	.popuptitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	/* 弹窗按钮 */
	.btnPat {
		width: 100%;
		display: flex;
		flex:1;
		flex-direction:row;
	}
	.btn {
		width: 90%;
		background-color: #ffc562;
		border-radius: 200upx;
		margin:40upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
		color: #fff;
	}
	.btn::after{
		border: none;
	}
	/* 表单 */
	.form {
		width:90%;
		position: relative;
		margin:40upx auto;
		display: block;
	}
	.uni-list-cell {
		line-height: 90upx;
	}
	.uni-list-cell-left {
		color: #999;
	}
	.uni-list-cell::after{
		left: 0;
	}
	.uni-list-cell-db image{
		 width:30upx;
		 height:30upx;
		 padding:0 15upx;
		 vertical-align: middle;
		 display: inline-block;
	 }

	.close {
		position: absolute;
		top:-75upx;
		left:10upx;
	}
	.close image {
		width:37upx;
		height:37upx;
	}
	/* 是否确认取消弹窗 */
	.confirm-center {
		margin:90upx auto 50upx;
		font-size: 32upx;
		color: #333;
		line-height:50upx;
		text-align: center;
	}
	.confirm-text {
		width:80%;
		margin: 0 auto 30upx;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: solid 1px #999;
	}
	.confirm-line {
		width: 1px;
		height:60upx ;
		background-color: #999;
	}
	.confirm-button-text {
		width:50%;
		background:transparent;
		font-size: 28upx;
		line-height:100upx;
		color: #333;
	}
	.confirm-button-text::after {
		border: none;
	}
	</style>

